p{
    width: 200px;
    height: 200px;
    border: 1px solid blue

}
.box1{
    /* 线性过度 */
    background: url(./img/1-1.png) center no-repeat, 
    linear-gradient(100deg,blue,red),
    left bottom / 100px 100px no-repeat,
    rgb(202, 148, 255);
}

.box2{
    background-color: rgb(168,35,35);
}

.box3{
    background-image: url(./img/1-1.png);
    background-repeat: no-repeat;
    /* background-size: contain; */
    /* background-size: 100px 100px; */
    background-size: 25%;
    /* background-position: left; */
    /* background-position: -30px; */
    /* background-position: 30px; */
    /* background-position: 100px 100px; */
    /* background-position: left 50px bottom; */
    /* 四值：偏移 */
    background-position: left -20px top 10px;

}

.box4{
    background: url(./img/1-1.png) repeat-y;
    /* 背景固定 */
    background-attachment: fixed;
}

.box5{
    /* 切图：固定窗口然后：hover */
    width: 160px;
    height: 160px;
    background: url(./img/1-1.png) no-repeat 0px 0px;
}

.box5:hover{
    cursor: pointer;
    background-position: -160px 0px;
}

.box6{
    background-image: url(./img/1-1.png),url(./img/1-1.png),url(./img/1-1.png);
    background-repeat: no-repeat;
    background-position: left top, left bottom, right bottom;
    background-size: 20% 30% 40%;
}